<!--
  审批项目-项目卡片 待办事项-构件检查

  props：
    title string 标题
    subtitle string 子标题
    date string 日期
    src string 图片地址

  slot:
    after 日期
-->
<template>
  <div class="product-status-card">
    <f7-card class="product-status-wrapper">
      <f7-card-content class="product-status-content">
        <f7-list media-list>
          <f7-list-item
            :title="title">
            <div slot="subtitle">
              <span>{{subtitle}}</span>
              <span v-if="subtitleAfter" style="margin-left: 10%">{{subtitleAfter}}</span>
            </div>
            <img slot="media" :src="src" width="44" />
            <span slot="after">{{titleAfter}}</span>
          </f7-list-item>
        </f7-list>
      </f7-card-content>
    </f7-card>
  </div>
</template>

<script>
export default {
  name: "qm-product-status",
  props: {
    title: {
      type: String,
      default: "构件检查"
    },
    subtitle: {
      type: String,
      default: "楼梯板-B-1  待入模检查"
    },
    subtitleAfter: String,
    titleAfter: {
      type: String
    },
    src: {
      type: String,
      default: require("/static/img/list/icon_daiban.png")
    },

  }
}
</script>

<style lang="less" scoped>
.product-status-card {
  margin-bottom: calc(20px * var(--ratio));
  &:last-child {
    margin-bottom: 0;
  }

  .product-status-wrapper {
    margin: 0;
    background: #FFFFFF;
    box-shadow: 0 calc(6px * var(--ratio)) calc(14px * var(--ratio)) 0 rgba(0, 0, 0, 0.05);
    border-radius: calc(16px * var(--ratio));

    .product-status-content {
      padding: calc(32px * var(--ratio)) calc(24px * var(--ratio));

      ::v-deep .list {
        margin: 0;

        .item-content {
          padding-left: 0;

          .item-media,.item-inner {
            padding: 0;
          }

          .item-title-row {
            margin-bottom: calc(16px * var(--ratio));
          }

          .item-title {
            color: #242424;
            font-size: var(--font-size-subtitle);
            font-weight: 500;
          }
          .item-after,.item-subtitle {
            color: #8998AC;
            font-size: var(--font-size-subcontent);
          }
        }
      }
    }
  }
}
</style>
